import React, { useState } from 'react';
import { Row, Col, Typography, Button, Space } from 'antd';
import { EyeOutlined, CalendarOutlined } from '@ant-design/icons';
import DestinationCard from '../components/DestinationCard';
import PhotoCarousel from '../components/PhotoCarousel';
import { mockDestinations, mockPhotos } from '../data/mockData';

const { Title } = Typography;

const HomePage: React.FC = () => {
  const [carouselVisible, setCarouselVisible] = useState(false);
  const [currentPhotoIndex, setCurrentPhotoIndex] = useState(0);

  const handlePhotoClick = (index: number) => {
    setCurrentPhotoIndex(index);
    setCarouselVisible(true);
  };

  return (
    <div style={{ padding: '24px', maxWidth: 1200, margin: '0 auto' }}>
      <div style={{ textAlign: 'center', marginBottom: 48 }}>
        <Title level={1}>探索世界的美好</Title>
        <p style={{ fontSize: 18, color: '#666', marginTop: 16 }}>
          发现令人惊叹的目的地，规划您的完美旅程
        </p>
      </div>

      <div style={{ marginBottom: 32 }}>
        <Space>
          <Button 
            type="primary" 
            icon={<EyeOutlined />}
            onClick={() => handlePhotoClick(0)}
            size="large"
          >
            浏览精彩照片
          </Button>
          <Button 
            icon={<CalendarOutlined />}
            size="large"
            href="/planner"
          >
            开始规划旅程
          </Button>
        </Space>
      </div>

      <div style={{ marginBottom: 32 }}>
        <Title level={2}>热门目的地</Title>
        <Row gutter={[24, 24]}>
          {mockDestinations.map((destination) => (
            <Col key={destination.id} xs={24} sm={12} lg={8}>
              <DestinationCard 
                destination={destination}
                onClick={() => console.log('点击了目的地:', destination.name)}
              />
            </Col>
          ))}
        </Row>
      </div>

      <PhotoCarousel
        photos={mockPhotos}
        visible={carouselVisible}
        onClose={() => setCarouselVisible(false)}
        currentIndex={currentPhotoIndex}
      />
    </div>
  );
};

export default HomePage;
